<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../images/logo-mi2.png" type="image/x-icon">
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/code.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/interface.js"></script>
</head>

<body>
    <div class="mi-sider-layout">
        <div class="mi-sider-sider">
            <div class="sider-box">
                <img src="../images/banner.4994397e.jpg" alt="" class="sider-img">
            </div>
        </div>
        <div class="mi-sider-content">
            <div class="mi-sider-scroll">
                <div class="mi-layout">
                    <div class="mi-layout-header cl">
                        <div class="mi-layout-title">
                            <img src="../images/logo-mi2.png" alt="">
                            <span></span>
                            小米账号
                        </div>
                        <div class="mi-nav">
                            <a href="" class="mi-nav-item">用户协议</a>
                            <a href="" class="mi-nav-item">隐私政策</a>
                            <a href="" class="mi-nav-item">帮助中心</a>
                            <div class="divider"></div>
                            <div class="mi-nav-item">中文(简体)</div>
                        </div>
                    </div>
                    <div class="mi-layout-container">
                        <div class="toast"></div>
                        <div class="card">
                            <div class="switch">
                                <i class="anticon mi-qr-login-switch__icon">
                                    <svg width="1em" height="1em" fill="currentColor" aria-hidden="true"
                                        focusable="false" class="">
                                        <path
                                            d="M0 16.977H16.94V.036H0v16.941zM4.235 4.271h8.47v8.47h-8.47v-8.47zM19.06.036v16.941h16.94V.036H19.06zm12.706 12.706h-8.471v-8.47h8.47v8.47zM6.353 10.624h4.235V6.39H6.353v4.235zM0 36.036H16.94V19.095H0v16.94zM4.235 23.33h8.47v8.47h-8.47v-8.47zM29.647 6.389h-4.235v4.235h4.235V6.39zM19.059 36.036h4.235V31.8h-4.235v4.235zm4.235-12.706v8.47h4.235v-8.47h-4.235zm8.47 8.47H27.53v4.236H36v-8.47h-4.234V31.8zm0-8.47H36v-4.235h-4.235v4.235zM19.06 19.095v4.235h4.235v-4.235h-4.235zM6.353 29.683h4.235v-4.235H6.353v4.235z"
                                            fill="#FFF" fill-rule="nonzero"></path>
                                    </svg>
                                </i>
                            </div>
                            <div class="ant-tabs">
                                <div class="ant-tabs-bar">
                                    <div class="ant-tabs-nav-container">
                                        <a href="../html/login.html">
                                            <div class="ant-tabs-tab">登录</div>
                                        </a>
                                        <div class="ant-tabs-tab active">注册</div>
                                        <div class="ant-tabs-ink-bar"></div>
                                    </div>
                                </div>
                                <div class="ant-tabs-content">
                                    <div class="ant-tabs-tabpane ant-tabs-tabpane-active">
                                        <form class="mi-form">
                                            <div class="mi-form-con">
                                                <div class="user">
                                                    <input type="text" name="" class="mi-input" id="user-inp">
                                                    <label class="user-lab">邮箱/手机号码/小米ID</label>
                                                    <div class="userTips" id="user-tips">11111</div>
                                                </div>
                                                <div class="pwd">
                                                    <div class="pwd-inp">
                                                        <input type="password" name="" class="mi-input" id="pwd-inp">
                                                        <div class="pwd-svg">
                                                            <svg viewBox="0 0 20 20" width="1em" height="1em"
                                                                fill="currentColor" class="mi-password-field__icon">
                                                                <path
                                                                    d="M19.78 7.738a.964.964 0 00-1.488-1.227 10.567 10.567 0 01-2.159 1.98 10.487 10.487 0 01-5.958 1.848 10.514 10.514 0 01-2.826-.381 10.394 10.394 0 01-1.977-.776 10.612 10.612 0 01-3.646-3.095.964.964 0 00-1.547 1.15c.487.655 1.037 1.26 1.642 1.808a.955.955 0 00-.084.17l-1.01 2.692a.964.964 0 101.806.677l.868-2.32a12.316 12.316 0 002.632 1.298l-.528 2.696a.964.964 0 101.893.371l.504-2.569c1.358.25 2.747.275 4.113.072l.44 2.417a.964.964 0 101.898-.346l-.455-2.502a12.37 12.37 0 002.381-1.029l.993 2.333a.964.964 0 001.775-.756l-1.139-2.673a12.537 12.537 0 001.871-1.838z">
                                                                </path>
                                                            </svg>
                                                        </div>
                                                    </div>
                                                    <label>密码</label>
                                                    <div class="userTips" id="pwd-tip">11111</div>
                                                </div>
                                                <div class="code">
                                                    <div class="code-inp">
                                                        <input type="text" name="" class="mi-input" id="code-inp">
                                                        <div class="code-svg">
                                                            agbc
                                                        </div>
                                                    </div>
                                                    <label>验证码</label>
                                                    <div class="userTips" id="code-tip"></div>
                                                </div>
                                                <button type="button" class="login">注册</button>
                                            </div>
                                            <div class="mi-sns-logo">
                                                <div class="mi-sns-tit">其他方式登录</div>
                                                <ul>
                                                    <li>
                                                        <svg viewBox="0 0 46 46" width="1em" height="1em">
                                                            <path
                                                                d="M10.35 25.898c-.543.439-1.125 1.076-1.294 1.886-.23 1.109-.048 2.496 1.021 3.583 1.296 1.32 3.263 1.68 4.112 1.744 2.31.165 4.77-.978 6.626-2.285a14.633 14.633 0 003.162-3.133c-2.667-1.376-5.996-2.898-9.555-2.75-1.818.076-3.12.454-4.072.956zm33.821 6.09A22.878 22.878 0 0046.001 23C46 10.319 35.683 0 23 0S0 10.319 0 23c0 12.684 10.315 23 23 23 7.654 0 14.441-3.761 18.624-9.53-4.82-2.4-9.646-4.785-14.48-7.156-1.916 2.184-4.746 4.372-7.943 5.324-2.01.598-3.822.825-5.715.438-1.875-.383-3.257-1.261-4.062-2.142-.41-.449-.88-1.02-1.222-1.699.032.086.055.137.055.137s-.196-.337-.346-.876a4.202 4.202 0 01-.16-1.401c-.02-.362.005-.726.077-1.081.187-.91.575-1.967 1.58-2.952 2.203-2.157 5.154-2.274 6.684-2.265 2.265.014 6.201 1.005 9.515 2.178.918-1.957 1.507-4.048 1.886-5.44H13.717v-1.49h7.075v-2.982h-8.567v-1.489h8.565v-2.979c0-.41.081-.745.745-.745h3.352v3.724H34.2v1.49h-9.312v2.98h7.45s-.748 4.17-3.088 8.28c5.192 1.854 12.494 4.71 14.92 5.664z"
                                                                fill="#1989fa"></path>
                                                        </svg>
                                                    </li>
                                                    <li>
                                                        <svg viewBox="0 0 46 46" width="1em" height="1em">
                                                            <g fill="#50b674">
                                                                <path
                                                                    d="M14.345 17.311a1.505 1.505 0 103.01 0 1.505 1.505 0 00-3.01 0zm6.74-.04a1.505 1.505 0 103.01 0 1.505 1.505 0 00-3.01 0zm3.756 6.732a1.045 1.045 0 102.09 0 1.045 1.045 0 00-2.09 0zm5.31.084a1.045 1.045 0 102.092 0 1.045 1.045 0 00-2.091 0z">
                                                                </path>
                                                                <path
                                                                    d="M23 0A23.001 23.001 0 006.736 39.263 23 23 0 0046 22.999 22.984 22.984 0 0023 0zm-3.93 28.311c-1.212 0-2.175-.25-3.387-.501l-3.387 1.673.961-2.885c-2.426-1.674-3.849-3.849-3.849-6.525 0-4.601 4.35-8.197 9.662-8.197 4.725 0 8.906 2.886 9.743 6.774a6.763 6.763 0 00-.921-.042c-4.601 0-8.197 3.429-8.197 7.652.01.676.11 1.348.293 1.998-.335 0-.628.042-.92.042zm14.135 3.387l.71 2.426-2.634-1.463c-.961.25-1.924.502-2.885.502-4.601 0-8.199-3.136-8.199-6.974 0-3.837 3.596-6.984 8.196-6.984 4.35 0 8.197 3.136 8.197 6.984 0 2.133-1.423 4.057-3.387 5.52z">
                                                                </path>
                                                            </g>
                                                        </svg>
                                                    </li>
                                                    <li>
                                                        <svg viewBox="0 0 46 46" width="1em" height="1em">
                                                            <path
                                                                d="M23 0C10.31 0 0 10.31 0 23s10.31 23 23 23 23-10.31 23-23S35.69 0 23 0zm10.363 29.926c-.053.053-.106.053-.159.106-.634-.159-1.374-.74-1.692-1.216-.158-.159-.211-.423-.475-.53 0 .953-.582 1.852-1.005 2.486-.159.211-.635.582-.635.793.16.106.37.159.582.212.476.211 1.163.581 1.428 1.004.105.159.264.317.317.476.74 1.745-1.64 2.168-2.855 2.432s-3.49-.476-4.124-.846c-.37-.264-.74-.846-1.322-.846-.159.106-.635.053-.9.053-.74 1.48-4.6 2.168-6.661 1.375-.635-.212-1.956-.793-1.692-1.798.211-.846.899-1.322 1.586-1.639.264-.159.846-.211 1.005-.476-.582-.423-1.11-1.269-1.375-1.956-.159-.37-.212-1.163-.423-1.428-.37.529-1.428 1.64-2.326 1.48-.16-.21-.318-.422-.423-.687-.212-.687-.106-1.797.105-2.432.37-1.322.74-2.273 1.428-3.225.211-.317.529-.529.74-.846-.423-.423-.317-1.692-.053-2.22.159-.37.423-.318.476-.9-.106-.158 0-.37-.053-.581-.211-.952.159-2.115.423-2.855.9-2.38 2.432-4.072 4.706-5.023.529-.212 1.163-.37 1.745-.476.264-.053.528 0 .74-.106 5.34-.053 8.037 2.75 9.041 7.032.159.688 0 1.586 0 2.274 1.216.264 1.48 2.696.476 3.384V23c.37.634.846 1.269 1.163 1.956.318.74.423 1.586.635 2.485.211.687-.106 2.274-.423 2.485z"
                                                                fill="#18acfc"></path>
                                                        </svg>
                                                    </li>
                                                    <li>
                                                        <svg viewBox="0 0 46 46" width="1em" height="1em">
                                                            <g fill="#ea5d5c">
                                                                <path
                                                                    d="M20.156 21.662c-4.35.21-7.862 2.55-7.862 5.478s3.513 5.144 7.862 4.935c4.35-.21 7.862-2.97 7.862-5.897-.042-2.885-3.555-4.725-7.862-4.516zm2.927 7.402c-1.338 1.756-3.972 2.593-6.523 1.17-1.213-.668-1.171-1.965-1.171-1.965s-.502-4.14 3.847-4.642c4.391-.543 5.186 3.68 3.847 5.437z">
                                                                </path>
                                                                <path
                                                                    d="M20.156 26.262a.613.613 0 00-.167.836c.125.251.502.293.752.084.251-.21.377-.585.21-.836-.126-.251-.46-.293-.795-.084zm-2.05.585a1.53 1.53 0 00-1.38 1.506c0 .67.67 1.17 1.465 1.087.794-.083 1.463-.71 1.463-1.422s-.627-1.254-1.547-1.17z">
                                                                </path>
                                                                <path
                                                                    d="M23 0C10.287 0 0 10.287 0 23s10.287 23 23 23 23-10.287 23-23S35.713 0 23 0zm8.866 28.144c-1.799 3.847-7.695 5.73-12.044 5.394-4.14-.334-9.493-1.714-10.036-6.816 0 0-.293-2.3 1.923-5.269 0 0 3.178-4.475 6.858-5.77 3.722-1.255 4.14.877 4.14 2.174-.209 1.087-.543 1.714.837 1.296 0 0 3.638-1.715 5.143-.21 1.213 1.214.21 2.928.21 2.928s-.502.544.543.753c.962.167 4.224 1.673 2.425 5.52zm-3.597-10.622a.733.733 0 01-.71-.71c0-.42.334-.712.71-.712 0 0 4.475-.836 3.931 4.015v.083a.723.723 0 01-.71.628.705.705 0 01-.712-.711c0-.084.711-3.304-2.509-2.593zm7.57 4.642c-.126.836-.544.502-1.004.502-.586 0-1.046-.753-1.046-1.339 0-.501.21-1.003.21-1.003.041-.21.543-1.547-.335-3.513-1.59-2.718-4.768-2.718-5.144-2.593-.376.168-.962.251-.962.251-.585 0-1.045-.46-1.045-1.045 0-.502.334-.878.752-1.004 0 0 0 .042.042.042s.084.042.084.042c.46-.084 2.049-.21 3.554.167 2.802.67 6.566 3.764 4.893 9.493z">
                                                                </path>
                                                            </g>
                                                        </svg>
                                                    </li>
                                                </ul>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mi-copyright">
                        小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {

        // 正确条件
        var isUserOk = false
        var isPwdOk = false;
        var isCodeOk = false;


        // 页面加载时 获取验证码
        $(".code-svg").text(randCode());
        // 点击验证码 重新获取
        $(".code-svg").click(function () {
            $(".code-svg").text(randCode());
        })


        // 用户名inp聚焦事件
        $("#user-inp").focus(function () {
            $(".user label").addClass("user-focus")
        })
        // 用户名失焦事件
        $("#user-inp").blur(function () {
            isUserOk = false;
            if ($("#user-inp").val() == "") {
                $(".user label").removeClass("user-focus").css({
                    color: "red"
                })
                $("#user-tips").css({
                    display: "block"
                }).text("请输入帐号")
                isUserOk = false
            } else {
                $(".user label").css({
                    color: "#aaa"
                })
                $("#user-tips").css({
                    display: "none"
                })
                var user = $("#user-inp").val().trim();
                $("#user-inp").val(user);
                var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;
                if (userReg.test(user)) {
                    isExistUser({ user }).then(data => {
                        var { status, msg } = data;
                        if (status) {
                            $("#user-tips").text("√");
                            isUserOk = true;
                        } else {
                            $("#user-tips").text("* 用户名已存在").css({ color: "red", display: "block" });
                        }
                    }).catch(err => {
                        throw err;
                    })
                } else {
                    $("#user-tips").text("* 用户名由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头").css({ color: "red", display: "block" });
                }
            }
        })

        // 密码框聚焦事件
        $("#pwd-inp").focus(function () {
            $(".pwd label").addClass("pwd-focus")
        })

        // 密码框失焦事件
        $("#pwd-inp").blur(function () {
            isPwdOk = false;
            if ($("#pwd-inp").val() == "") {
                $(".pwd label").removeClass("pwd-focus").css({
                    color: "red"
                })
                $("#pwd-tip").css({
                    display: "block"
                }).text("请输入密码")
                isPwdOk = false;
            } else {
                $(".pwd label").css({
                    color: "#aaa"
                })
                $("#pwd-tip").css({
                    display: "none"
                })
                isPwdOk = false;
                var pwdReg = /^[\w$]{6,12}$/;
                if (pwdReg.test($("#pwd-inp").val())) {
                    $("#pwd-tip").text("√");

                    var isExistNum = false;
                    var isExistSmall = false;
                    var isExistBig = false;
                    var isExistSpe = false;

                    if (/[0-9]/.test($("#pwd-inp").val())) isExistNum = true;
                    if (/[a-z]/.test($("#pwd-inp").val())) isExistSmall = true;
                    if (/[A-Z]/.test($("#pwd-inp").val())) isExistBig = true;
                    if (/[_$]/.test($("#pwd-inp").val())) isExistSpe = true;

                    var sum = isExistNum + isExistSmall + isExistBig + isExistSpe;

                    switch (sum) {
                        case 1:
                            $("#pwd-tip").text("密码强度:弱").attr("style", "color:green");
                            break;
                        case 2:
                            $("#pwd-tip").text("密码强度:中").attr("style", "color:orange");
                            break;
                        case 3:
                            $("#pwd-tip").text("密码强度:强").attr("style", "color:yellow");
                            break;
                        case 4:
                            $("#pwd-tip").text("密码强度:超强").attr("style", "color:gold");
                            break;
                    }

                    isPwdOk = true;
                } else {
                    $("#pwd-tip").text("* 密码由数字,大小写字母,下划线,$组成,6-12位").css({ color: "red", display: "block" });
                }
            }
        })

        // 密码显示图标点击事件
        var ispwd = true;
        $(".pwd-svg").click(function () {
            // console.log(ispwd);
            if (ispwd == true) {
                ispwd = false;
                $(".pwd-svg").html(`<svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" class="mi-password-field__icon"><path d="M10 3c4.003 0 7.53 2.102 9.593 5.291a2.53 2.53 0 010 2.75c-2.063 3.19-5.59 5.292-9.593 5.292s-7.53-2.101-9.593-5.29a2.53 2.53 0 010-2.752C2.47 5.101 5.997 3 10 3zm-.012 2.333a4.337 4.337 0 00-4.34 4.334A4.337 4.337 0 009.988 14c2.397 0 4.34-1.94 4.34-4.333a4.337 4.337 0 00-4.34-4.334zm0 1.334a3.002 3.002 0 013.004 3c0 1.657-1.345 3-3.004 3a3.002 3.002 0 01-3.005-3c0-1.657 1.345-3 3.005-3z" fill-rule="evenodd"></path></svg>`)
                $("#pwd-inp").prop("type", "text")
            } else if (ispwd == false) {
                ispwd = true;
                $(".pwd-svg").html(`<svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor" class="mi-password-field__icon"><path d="M19.78 7.738a.964.964 0 00-1.488-1.227 10.567 10.567 0 01-2.159 1.98 10.487 10.487 0 01-5.958 1.848 10.514 10.514 0 01-2.826-.381 10.394 10.394 0 01-1.977-.776 10.612 10.612 0 01-3.646-3.095.964.964 0 00-1.547 1.15c.487.655 1.037 1.26 1.642 1.808a.955.955 0 00-.084.17l-1.01 2.692a.964.964 0 101.806.677l.868-2.32a12.316 12.316 0 002.632 1.298l-.528 2.696a.964.964 0 101.893.371l.504-2.569c1.358.25 2.747.275 4.113.072l.44 2.417a.964.964 0 101.898-.346l-.455-2.502a12.37 12.37 0 002.381-1.029l.993 2.333a.964.964 0 001.775-.756l-1.139-2.673a12.537 12.537 0 001.871-1.838z"></path></svg>`)
                $("#pwd-inp").prop("type", "password")
            }

        })

        // 验证码聚焦
        $("#code-inp").focus(function () {
            $(".code label").addClass("code-focus")
        })
        // 用户名失焦事件
        $("#code-inp").blur(function () {
            isCodeOk = false;
            if ($("#code-inp").val() == "") {
                $(".code label").removeClass("code-focus").css({
                    color: "red"
                })
                $("#code-tip").css({
                    display: "block"
                }).text("请输入验证码")
                isCodeOk = false
            } else {
                $(".code label").css({
                    color: "#aaa"
                })
                $("#code-tip").css({
                    display: "none"
                })
                var code = $("#code-inp").val();
                console.log(code);
                $("#code-inp").val(code);
                var RCode = $(".code-svg").text();   //随机的验证码
                console.log(RCode);
                var codeReg = new RegExp(`^${RCode}$`, "i");
                if (codeReg.test(code)) {
                    $("#code-tip").text("√")
                    isCodeOk = true;
                } else {
                    $("#code-tip").text('* 验证码有误').css({ color: "red", display: "block" });
                }
            }
        })

        // 登录按钮点击事件
        var isRegisterSuccess = false;  // 记录是否注册成功, 函数防抖
        $(".login").click(function () {
            if (isRegisterSuccess) return false; // 防抖
            console.log(isUserOk, isPwdOk, isCodeOk);

            if (isUserOk && isPwdOk && isCodeOk) {
                var user = $("#user-inp").val();
                var pwd = $("#pwd-inp").val();

                register({ user, pwd }).then(data => {
                    var { status, msg } = data;
                    if (status) {
                        isRegisterSuccess = true;
                        location.href = "./login.html";
                    } else {
                        alert(msg);
                        isRegisterSuccess = false;
                    }
                }).catch(err => {
                    throw err;
                })
            } else {
                isRegisterSuccess = false;
            }
        })
    })
</script>

</html>